<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        .back2top {
            width: 149px;
            height: 250px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-image: url(img/rocket.png);
            display: none;
        }
        
        .back2top:hover {
            background-position: -149px 0;
        }
        
        .back2top .fly {
            background-image: url(img/rocketFly.gif);
            width: 149px;
            height: 250px;
            display: none;
        }
    </style>
</head>

<body>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
        <li>item41</li>
        <li>item42</li>
        <li>item43</li>
        <li>item44</li>
        <li>item45</li>
        <li>item46</li>
        <li>item47</li>
        <li>item48</li>
        <li>item49</li>
        <li>item50</li>
    </ul>

    <div class="back2top">
        <div class="fly"></div>
    </div>

    <script src="js/jquery-1.11.0.js"></script>
    <script>
        ! function() {

            var $back2top = $('.back2top'),
                $fly = $('.fly');

            $(window).on('scroll', function() {

                var $this = $(this),
                    st = $this.scrollTop(),
                    height = $this.height();

                if (st > height) {
                    $back2top.slideDown(300);
                } else {
                    $back2top.slideUp(300);
                }
            });

            $back2top.on('click', function() {
                $fly.show();
                $("html, body").animate({
                    scrollTop: 0
                }, 600);
                $back2top.delay(200).animate({
                    top: '-1000px'
                }, 600, function() {
                    $back2top.css({
                        bottom: '20px',
                        top: 'auto',
                        display: 'none'
                    });
                    $fly.hide();
                });

            });

        }();
    </script>
</body>

</html>